<template> <!-- 对战页面 -->
	<view class="wrap" v-if="!isLoading">
		<view class="layout-position">
			<!-- 背景音乐 -->
			<view class="layout-music flex justify-end">
				<view class="text m-right-30">背景音乐</view>
				<u-switch v-model="switchValue" size="32" @change="musicDo"></u-switch>
				<!-- activeColor="#4395f9" -->
			</view>
			<!-- 双方 -->
			<view class="layout-vs flex justify-between align-center m-top-30">
				<view class="user">
					<view class="hd hd-1">
						<u-image :src="game_info.user_left.avatar_url" width="120rpx" height="120rpx"
							shape="circle"></u-image>
					</view>
					<view class="number number-1 flex justify-center align-center">
						<text class="sm m-right-10" v-if="user_left_score=='+10'">({{user_left_score}})</text>
						<text class="da">{{left_score}}</text>
					</view>
					<view class="name name-1 flex align-center">
						<view class="text-single">{{game_info.user_left.nick_name}}</view>
					</view>
				</view>
				<view class="vs">
					<image class="full" src="/static/image/vs.png" mode=""></image>
				</view>
				<view class="user">
					<view class="hd hd-2">
						<u-image :src="game_info.user_right.avatar_url" width="120rpx" height="120rpx"
							shape="circle"></u-image>
					</view>
					<view class="number number-2 flex justify-center align-center">
						<text class="da">{{right_score}}</text>
						<text class="sm m-left-10" v-if="user_right_score=='+10'">({{user_right_score}})</text>

					</view>
					<view class="name name-2 flex align-center">
						<view class="text-single">{{game_info.user_right.nick_name}}</view>
					</view>
				</view>
			</view>
			<!-- 进度 -->
			<view class="layout-schedule m-top-30">
				<view class="countdown">{{countdown}}</view>
				<view class="nmb">
					随机题目『 <text class="current">{{tikuIndex+1}}</text> / {{total}} 』
				</view>
				<view class="schedule">
					<view class="active"></view>
				</view>
			</view>
			<!-- 题目 -->
			<view class="layout-topic m-top-20">
				<view class="title">
					{{title}}
				</view>
				<view class="result m-top-30">
					<view class="result-item" v-for="(item,index) in resultList" :key="index"
						@click="handResult(index)">
						<view class="icon true" v-if="item.is_right == 1 && resultIndex == index">
							<image class="full" src="/static/image/rtrue.png" mode=""></image>
						</view>
						<view class="icon true" v-if="!item.is_right&& resultIndex == index">
							<image class="full" src="/static/image/rfalse.png" mode=""></image>
						</view>
						<view
							:class="['text', {dui:item.is_right  == 1 && resultIndex == index}, {cuo:!item.is_right && resultIndex == index}]">
							{{ item.content }}
						</view>
						<block v-if="resultIndex>-1">


							<view class="icon false" v-if="item.is_right == 1 && user_answer_index == index">
								<image class="full" src="/static/image/rtrue.png" mode=""></image>
							</view>
							<view class="icon false" v-if="!item.is_right&& user_answer_index == index">
								<image class="full" src="/static/image/rfalse.png" mode=""></image>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 右下角背景图 -->
		<view class="hi">
			<image class="full" src="/static/image/hi.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import * as GameApi from '@/api/dati/pk'
		import * as Game2Api from '@/api/dati/game'
	import * as UserApi from '@/api/user'
	export default {
		data() {
			return {
				isLoading: true,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				switchValue: true,
				isResult: 0,

				tikuIndex: 0,
				resultIndex: -1,
				user_answer_index: -1,
				resultList: [],
				tikuList: [],
				title: '',
				answer: '',
				desc: '',
				total: 0,
				gameId: 0,

				game_info: {},
				is_choose: false,
				user_left_score: '',
				user_right_score: '',
				left_score: 0,
				right_score: 0,
				countdown: 20,
				 countdowns:20,
				timer: null,
				is_play: true,
				audio: null,
				audio_url: '',
				userInfo: {},
				is_shake: 0
			};
		},

		onLoad(options) {
					this.getCountdown()
			this.gameId = options.gameId
			this.getUserInfo()
			this.getTikus(options.gameId)
			this.getGameInfo(options.gameId)
			this.daojishi()
		},

		onUnload() {
			if (this.audio) {
				this.audio.stop();
			}
			console.log(45)
			clearInterval(this.timer);
		},
		methods: {
			getCountdown() {
				Game2Api.getCountdown()
					.then(result => {
						this.countdown = result.data.contdown
						this.countdowns = result.data.contdown
			
					})
			},
			musicDo(e) {
				console.log(e)
				if (e == false) {
					this.audio.stop();
				} else {
					if (!this.audio) {
						var audio_url = this.audio_url
						this.skvido(audio_url)
					} else {
						this.audio.play();
					}

				}
			},

			getGameTikuResult(gameId, tikuId) {
				GameApi.game_tiku_result({
						gameId: gameId,
						tikuId: tikuId
					})
					.then(result => {
						this.right_score = result.data.game.user_right_score



					})
			},

			getUserInfo() {
				UserApi.info()
					.then(result => {
						this.userInfo = result.data.userInfo
						this.audio_url = result.data.userInfo.audio_url

						if (result.data.userInfo.is_music) {
							this.skvido(result.data.userInfo.audio_url)
							this.switchValue = true

						} else {
							this.switchValue = false
						}
						this.is_shake = result.data.userInfo.is_shake
						this.isLoading = false


					})
			},
			skvido(audio_url) {

				console.log(556)
				// 创建音频对象
				this.audio = uni.createInnerAudioContext();



				// 设置音频源
				//this.audio.src = 'https://safe.gxgyl.com/uploads/bg.mp3';
				this.audio.src = audio_url;



				// 播放音频
				this.audio.play();
				this.is_play = true

				// 监听音频播放完成事件
				this.audio.onEnded(() => {
					//this.is_play = false
					this.skvido(audio_url)
					console.log('音频播放完成');
				});

				// 监听音频播放错误事件
				this.audio.onError((err) => {
					console.log('音频播放错误', err);
				});
				return
				let _this = this;
				plugin.textToSpeech({
					lang: "zh_CN",
					tts: true,
					content: _this.timu_title,
					success: function(res) {
						console.log("succ tts", res.filename)

						let music = null;
						music = uni.createInnerAudioContext(); //创建播放器对象
						music.src = res.filename;
						music.play(); //执行播放
						music.onEnded(() => {

							//播放结束
							//_this.is_play = false
							//music = null;
						});
					},
					fail: function(res) {
						// console.log("fail tts", res)
					}
				})
			},

			daojishi() {


				// 开始倒计时

				this.timer = setInterval(() => {
					this.countdown--;
					console.log(this.countdown)

					if (this.user_answer_index == -1) {
						this.getUserAnswer()
					}


					if (this.user_answer_index > -1 && this.resultIndex > -1) {

						console.log('ceshi')
						//下一题
						var index = this.tikuIndex + 1
						console.log(555)


						this.resultIndex = -1
						this.user_answer_index = -1
						this.is_choose = false
						this.is_show_desc = false
						var count = this.tikuList.length
						this.tikuIndex = index
						if (index == count) {
							this.$u.route({
								url: 'pagesNew/pk/result?gameId=' + this.gameId,
								type: 'redirectTo',
							})
							clearInterval(this.timer);
						} else {
							this.title = this.tikuList[index].tiku.title
							this.desc = this.tikuList[index].tiku.desc
							this.resultList = this.tikuList[index].tiku.options

						}


						//clearInterval(interval);
						this.countdown = this.countdowns

					}



					if (this.countdown === 0) {
						if (this.resultIndex == -1) {

							uni.vibrateLong({
								success: function() {
									console.log('回答错误');
								}
							});

						}
						var index = this.tikuIndex + 1
						var count = this.tikuList.length
						this.tikuIndex = index
						if (index == count) {

							this.$u.route({
								url: 'pagesNew/pk/result?gameId=' + this.gameId,
								type: 'redirectTo',
							})
							clearInterval(this.timer);
						} else {
							this.title = this.tikuList[index].tiku.title
							this.desc = this.tikuList[index].tiku.desc
							this.resultList = this.tikuList[index].tiku.options

							this.resultIndex = -1
							this.user_answer_index = -1
							this.is_choose = false
							this.is_show_desc = false
						}
						//clearInterval(interval);
						this.countdown =  this.countdowns
					}
				}, 1000);



			},
			//获取pk对象答案
			getUserAnswer() {
				var tindex = this.tikuIndex
				var id = this.tikuList[tindex].id

				GameApi.getUserAnswer({
						id: id,
					})
					.then(result => {
						if (this.game_info.userFrom.user_id == this.game_info.user_left.user_id) {
							this.user_answer_index = result.data.detail.user_answer_index
							if (result.data.detail.user_is_right) {
								this.user_right_score = '+10'
								this.right_score = Number(this.right_score) +
									10
							}
						} else {
							//获取接受者答案
							this.user_answer_index = result.data.detail.user_from_answer_index

							if (result.data.detail.user_form_is_right) {
								this.user_right_score = '+10'
								this.right_score = Number(this.right_score) +
									10

							}

						}
						if (this.resultIndex > -1 && this.user_answer_index > -1) {
							console.log('ceshi')
							//下一题
							var index = this.tikuIndex + 1
							console.log(555)


							this.resultIndex = -1
							this.user_answer_index = -1
							this.is_choose = false
							this.is_show_desc = false
							var count = this.tikuList.length
							this.tikuIndex = index
							if (index == count) {
								this.$u.route({
									url: 'pagesNew/pk/result?gameId=' + this.gameId,
									type: 'redirectTo',
								})
								clearInterval(this.timer);
							} else {
								this.title = this.tikuList[index].tiku.title
								this.desc = this.tikuList[index].tiku.desc
								this.resultList = this.tikuList[index].tiku.options

							}


							//clearInterval(interval);
							this.countdown =  this.countdowns
						}





					})
			},
			getGameInfo(gameId) {
				GameApi.game_info({
						gameId: gameId,
						role: 4
					})
					.then(result => {
						this.game_info = result.data.game


						this.isLoading = false

					})
			},
			getTikus(gameId) {
				GameApi.tiku_list({
						gameId: gameId
					})
					.then(result => {
						this.tikuList = result.data.list
						this.total = result.data.list.length
						this.resultList = result.data.list[0].tiku.options

						this.resultList.forEach(item => {
							if (item.is_right) {
								this.answer = item.content
							}
						})
						this.title = result.data.list[0].tiku.title
						this.desc = result.data.list[0].tiku.desc
					})
			},

			// 模拟答案
			handResult(index) {
				if (this.is_choose == true) {
					return false
				}

				this.resultIndex = index
				var is_right = 0
				var content = ''
				this.is_show_desc = true
				this.resultList.forEach((item, tindex) => {

					if (item.is_right && index == tindex) {
						content = item.content
						is_right = 1
						this.user_left_score = '+10'
						var score = this.left_score
						score = Number(score) + 10
						this.left_score = score
						this.is_show_desc = false
						console.log('得分' + score)
					} else {


						content = item.content

					}
					if (index == tindex) {
						item.is_check = 1
					}
					return item
				})

				if (this.is_show_desc) {
					if (this.is_shake == 1) {


						uni.vibrateLong({
							success: function() {
								console.log('回答错误');
							}
						});
					}
				}

				//更新回答后端
				this.updateTiku(index, is_right, content)

				this.is_choose = true

			},
			updateTiku(index, is_right, content) {

				var values = {}
				var tindex = this.tikuIndex
				values.id = this.tikuList[tindex].id
				if (this.game_info.userFrom.user_id == this.game_info.user_left.user_id) {
					//发起人
					values.user_from_answer_index = index
				} else {
					values.user_answer_index = index
				}
				values.game_id = this.gameId
				values.is_right = is_right
				values.content = content
				values.tindex = tindex



				GameApi.update_tiku(values)
					.then(result => {


					})



			},

		}
	}
</script>

<style lang="scss">
	.hi {
		position: fixed;
		right: 0;
		bottom: 100rpx;
		z-index: 1;
		width: 500rpx;
		height: 372rpx;
	}

	.layout-position {
		position: relative;
		z-index: 99;
	}

	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 34rpx;
			line-height: 38rpx;
			color: #101010;
		}
	}

	.layout-vs {
		position: relative;

		.vs {
			position: absolute;
			left: 50%;
			bottom: 0;
			z-index: 1;
			transform: translateX(-50%);
			width: 120rpx;
			height: 100rpx;
		}
	}

	.user {
		position: relative;
		width: 300rpx;
		height: 172rpx;
		padding-top: 10rpx;

		.hd {
			position: absolute;
			top: 0;
			z-index: 10;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.name {
		// position: absolute;
		// bottom: 0;
		// z-index: 9;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #fff;
	}

	.hd-1 {
		right: -20rpx;
	}

	.hd-2 {
		left: -20rpx;
	}

	.name-1 {
		// left: 0;
		padding: 0 40rpx 0 36rpx;
		background: url('~@/static/image/name-1.png') center no-repeat;
		background-size: 100% 100%;
	}

	.name-2 {
		// right: 0;
		padding: 0 36rpx 0 40rpx;
		background: url('~@/static/image/name-2.png') center no-repeat;
		background-size: 100% 100%;
	}

	.number {
		width: 100%;
		height: 72rpx;
		box-sizing: border-box;
	}

	.number-1 {
		padding-right: 100rpx;
	}

	.number-2 {
		padding-left: 100rpx;
	}

	.sm {
		margin-top: -6rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.da {
		font-size: 40rpx;
		font-weight: 600;
		line-height: 1;
		color: #FC2A2A;
	}

	.layout-topic {
		padding: 20rpx 40rpx;

		.title {
			font-size: 36rpx;
			line-height: 48rpx;
			color: #101010;
		}

		.result-item {
			position: relative;
			display: flex;
			align-items: center;
			margin: 10rpx auto 0;
			width: 580rpx;
			height: 100rpx;
			padding-left: 100rpx;
			font-size: 36rpx;
			line-height: 44rpx;
			color: #ffffff;
			box-sizing: border-box;
			background-color:#0197f8;
			border-radius: 10rpx;

			.icon {
				position: absolute;
				top: 50%;
				z-index: 9;
				margin-top: -20rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.true {
				left: 10rpx;
			}

			.false {
				right: 10rpx;
			}

			.dui {
				color: #6BFF47;
			}

			.cuo {
				color: #FC2A2A;
			}
		}
	}

	.layout-schedule {
		position: relative;
		padding: 0rpx 36rpx;

		.countdown {
			position: relative;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 122rpx;
			height: 122rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #FC2A2A;
			border-radius: 50%;
			border: 11rpx solid #aae0e0;
			box-sizing: border-box;
			background-image: linear-gradient(#5a8cd1, #5084cd);
		}

		.nmb {
			position: absolute;
			left: 160rpx;
			top: 0;
			z-index: 8;
			font-size: 36rpx;
			line-height: 52rpx;
			color: #fff;

			.current {
				color: #FC2A2A;
			}
		}

		.schedule {
			position: absolute;
			left: 90rpx;
			bottom: 0;
			z-index: 8;
			width: 636rpx;
			height: 68rpx;
			border: 10rpx solid #79c0c6;
			border-radius: 34rpx;
			box-sizing: border-box;
			background-image: linear-gradient(#31757e, #4fc2b3, #2e7885);

			.active {
				width: 30%;
				height: 48rpx;
				border-radius: 28rpx;
				background-image: linear-gradient(#6cbaf8, #6ea8f1, #2858ad);
			}
		}
	}
</style>